import React, {Component} from 'react'
import {Dialog} from "primereact/dialog";
import {InputText} from "primereact/inputtext";
import {InputTextarea} from "primereact/inputtextarea";
import '../address.css'
import {Button} from "primereact/button";
import TransferD from "./TransferD";

class AddressInfoDialog extends Component {

    constructor() {
        super();
        this.state = {
            editable: false,
            name: "张三",
            remark: "他可能是个大户",
            newAddress: null,

        }
        this.editable = this.editable.bind(this);
    }

    editable() {
        this.setState({
            editable: true,
        })
    }


    render() {
        return (
            <div>
                <div>
                    <div className="card p-g-12">
                        <label className="p-g-2">名称：</label>
                        <InputText disabled={!this.state.editable}
                                   placeholder="请输入用户名"
                                   value={this.state.name}
                                   onChange={(e) => this.setState({name: e.target.value})}/>
                    </div>

                    <div className="card p-g-12">
                        <label className="p-g-2">备注：</label>
                        <InputTextarea placeholder="备注"
                                       id="remark" rows={3} cols={70}
                                       value={this.state.remark}
                                       onChange={(e) => this.setState({remark: e.target.value})}
                        />
                    </div>

                    <div className="card  p-g-12">
                        <label className="p-g-2">地址1：</label>
                        <span className="p-g-8">zuowen123123</span>
                        <Button label="转账" className="p-button-success" style={{marginLeft: "15px"}}/>
                    </div>
                    <div className="card  p-g-12">
                        <label className="p-g-2">地址2：</label>
                        <span className="p-g-8">yuanyouliaaa</span>
                        <Button label="转账" onClick={() => this.setState({transferVisible: true})}
                                className="p-button-success" style={{marginLeft: "15px"}}/>
                        <Dialog visible={this.state.transferVisible}
                                header="转账"
                                width={700}
                                modal={true}
                                style={{minHeight:"400px"}}
                                onHide={() => this.setState({transferVisible: false})}>
                            <TransferD/>
                        </Dialog>


                    </div>
                    {
                        this.state.editable && <div className="card">
                            <label className="p-g-2">新增地址：</label>
                            <InputText placeholder="请输入新地址" value={this.state.newAddress}
                                       onChange={(e) => this.setState({newAddress: e.target.value})}
                                       className="placeholderColor p-g-8"/>
                            <Button label="确认" className="p-button-success" style={{marginLeft: "15px"}}/>
                        </div>
                    }
                    <div style={{textAlign: "center"}}>
                        <Button style={{width: "100px", marginRight: "10px"}} label={"编辑"} className="p-button-success"
                                onClick={() => this.editable()}/>
                        <Button style={{width: "100px"}} label={"确认"} className="p-button-warning"
                                onClick={() => this.setState({editable: false})}/>
                    </div>
                </div>
            </div>
        )
    }
}

export default AddressInfoDialog